<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SqlClient</title>
    <link href="/static/js/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet"/>
    <script src="/static/js/ext-all.js" type="text/javascript"></script>
    <script src="/static/js/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script src="/static/js/MyVTypes.js" type="text/javascript"></script>
    <script src="/static/js/utils.js" type="text/javascript"></script>

    <link href="/static/codemirror/lib/codemirror.css" rel="stylesheet"/>
    <link href="/static/codemirror/addon/hint/show-hint.css" rel="stylesheet"/>
    <link href="/static/codemirror/theme/idea.css" rel="stylesheet"/>

    <script src="/static/codemirror/lib/codemirror.js" type="text/javascript"></script>
    <script src="/static/codemirror/mode/sql/sql.js" type="text/javascript"></script>
    <script src="/static/codemirror/addon/hint/show-hint.js" type="text/javascript"></script>
    <script src="/static/codemirror/addon/hint/sql-hint.js" type="text/javascript"></script>
    <script src="/static/codemirror/addon/selection/active-line.js" type="text/javascript"></script>

    <script type="text/javascript">
        Ext.application({
            name: 'MyEdit',
            launch: function() {

                var editor;

               var store = null;

               // 每页显示条数下拉选择框
               var pagesize_combo = null;
               var number = 50;
               // 分页工具栏
               var bbar = null;
               var grid = null;

               /**
                * 生成一个 textarea
                * */
               Ext.DomHelper.append(document.body, {tag: 'textarea', id: 'code_area'});

               var code_area_panel = Ext.create('Ext.panel.Panel', {
                   anchor: '100%',
                   resizable: {
                       handles: 's'
                   },
                   listeners: {
                       resize: function(obj, width, height, oldWidth, oldHeight, eOpts){
                           if (typeof(editor) != 'undefined' && editor)
                           {
                               editor.setSize('auto', height + 'px');
                           }
                       }
                   },
                   contentEl: 'code_area'
               });

               var source = {"users": ["id", "name"], "dbs": ["id", "name"]};
               //var source = eval('(' + document.getElementById('table_info').innerText + ')');

                var edit_form = Ext.create('Ext.form.Panel', {
                   /**
                    * 定义 eidt form
                    * */
                   id: 'edit_form',
                   itemId: 'edite_win',
                   layout: "form",
                   defaults: {
                       anchor: '100%'
                   },
                   buttonAlign: "center",
                   labelAlign: "right",
                   items: [code_area_panel, {
                       id: 'p_grid',
                       itemId: 'p_grid',
                       bodyStyle :'overflow-x:hidden;overflow-y:scroll',
                       border: true,
                       hidden: true
                   }, {
                       itemId: 'p_error',
                       hidden: true
                   }],
                   listeners: {
                       "afterrender": function (m) {
                       }
                   }
               });

                Ext.create('Ext.Viewport', {
                   layout: 'border',
                   title: 'MyPlus 的主界面',
                   defaults: {
                       //collapsible: true,
                       split: true
                   },
                   items: [{
                       region: 'center',
                       xtype: 'panel',
                       id: 'panel_panel',
                       defaults: {
                           anchor: '100%'
                       },
                       //itemId: 'panel_panel',
                       items: [edit_form],
                       listeners: {
                           afterrender: function (obj) {
                               editor = CodeMirror.fromTextArea(document.getElementById('code_area'), {//根据DOM元素的id构造出一个编辑器
                                   lineNumbers: true,
                                   styleActiveLine: true,
                                   theme: "idea",//设置主题
                                   mode: 'text/x-mysql',
                                   //mode : 'text/x-plsql',
                                   hintOptions: {tables: source}
                               });
                               editor.setSize('auto', '227px');
                               editor.on("keyup", function (cm, event) {
                                   if (!cm.state.completionActive//所有的字母和'$','{','.'在键按下之后都将触发自动完成
                                       && ((event.keyCode >= 65 && event.keyCode <= 90)
                                           || event.keyCode == 52 || event.keyCode == 219
                                           || event.keyCode == 190)) {
                                       CodeMirror.commands.autocomplete(cm, null, {
                                           completeSingle: false
                                       });
                                   }

                                   var sql_node = localStore.findSql_node(scenes_name, seq_name);
                                   if (sql_node != null) {
                                       sql_node.sql = editor.getValue();
                                       localStore.updateNode(scenes_name, sql_node);
                                   }
                               });

                               var sql_node = localStore.findSql_node(scenes_name, seq_name);
                               if (sql_node != null && sql_node.sql != '') {
                                   editor.setValue(sql_node.sql);
                               }
                           }
                       },
                       bodyStyle :'overflow-x:hidden;overflow-y:scroll',
                       hidden: false
                   }]
               });
            }
        });
    </script>
</head>
<body>

</body>
</html>







































